<template>
    <div class="heartWrapper">
        <HandAni></HandAni>
        <div class="wrapper" :class="{smaller: isSmaller}">
          <div class="anim-box">
            <div class="head"></div>
            <div class="plane planeMove"></div>
            <div class="offgas offgasMove"></div>
            <div class="arrows1"></div>
            <div class="text"></div>
            <div class="btn" @touchend="toJie()"></div>
          </div>
        </div>

    </div>
</template>

<script>
    import HandAni from './handAni.vue';

    export default {
        props: ['resources', 'pageType', 'jieImg'],
        data() {
            return {
                showPlane: true,
              isSmaller: false,
            }
        },
        mounted() {
//            this.jieImg = 'heartJie';
          var clientWidth = document.documentElement.clientWidth;
          var clientHeight = document.documentElement.clientHeight;
          this.isSmaller = clientWidth/clientHeight > 0.66 ? true : false;
          console.log(clientWidth/clientHeight, this.isSmaller);

        },
        methods: {

            toJie() {
                console.log('jie', this.jieImg);

                this.$emit('update:jieImg', 'heartJie');
                this.$emit('update:pageType', 'jie');
            }

        },
        components: {
            HandAni
        }
    }
</script>
<style lang="less" scoped>
    .heartWrapper {
        height: 100%;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        overflow: hidden;
        .wrapper {
            height: 100%;
            width: 100%;
            background-image: url("../../img/heart/heartText.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: center 90%;
            position: absolute;
          .anim-box {
            position: absolute;
            top: 0.3rem;
            width: 100%;
            height: 100%;
            .btn {
              width: 2.56rem;
              height: 2.56rem;
              position: absolute;
              left: 3.71rem;
              bottom: 1.9rem;
            }

            .head {
              height: 3.05rem;
              width: 4rem;
              background-image: url("../../img/heart/head.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 6.6rem;
              left: 2.97rem;
              -webkit-animation: headMove 1s infinite;
              -o-animation: headMove 1s infinite;
              animation: headMove 1s infinite;
            }
            @keyframes headMove {
              0%, 100% {
                transform: rotate(-6deg);
                transform-origin: 50% 120%;
              }
              50% {
                transform: rotate(6deg);
                transform-origin: 50% 120%;
              }
            }
            @-webkit-keyframes headMove {
              0%, 100% {
                transform: rotate(-6deg);
                transform-origin: 50% 120%;
              }
              50% {
                transform: rotate(6deg);
                transform-origin: 50% 120%;
              }
            }

            .plane {
              height: 1.76rem;
              width: 2.58rem;
              background-image: url("../../img/heart/plane.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 9.91rem;
              left: 0.14rem;
            }
            .planeMove {
              -webkit-animation: planeMove 1s;
              animation: planeMove 1s;
            }
            @keyframes planeMove {
              from {
                transform: scale(0);
                opacity: 0;
              }
              to {
                transform: scale(1);
                opacity: 1;
              }
            }
            @-webkit-keyframes planeMove {
              from {
                transform: scale(0);
                opacity: 0;
              }
              to {
                transform: scale(1);
                opacity: 1;
              }
            }

            .offgas {
              height: 0.63rem;
              width: 0.64rem;
              background-image: url("../../img/heart/offgas.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 9.44rem;
              left: 2.26rem;
            }
            .offgasMove {
              -webkit-animation: offgasMove 1.5s infinite;
              animation: offgasMove 1.5s infinite;
            }
            @keyframes offgasMove {
              0% {
                opacity: 0;
              }
              30% {
                bottom: 9.88rem;
                left: 1.96rem;
                transform: scale(0);
                opacity: 0;
              }
              100% {
                transform: scale(1);
                opacity: 1;
              }
            }
            @-webkit-keyframes offgasMove {
              0% {
                opacity: 0;
              }
              30% {
                bottom: 9.88rem;
                left: 1.96rem;
                transform: scale(0);
                opacity: 0;
              }
              100% {
                transform: scale(1);
                opacity: 1;
              }
            }

            .arrows1 {
              height: 0.72rem;
              width: 1.08rem;
              background-image: url("../../img/heart/arrows.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 8.32rem;
              left: 6.63rem;
              -webkit-animation: arrowsMove1 0.8s infinite;
              animation: arrowsMove1 0.8s infinite;
            }
            @keyframes arrowsMove1 {
              50% {
                left: 6.7rem;
                bottom: 8.5rem;
              }
            }
            @-webkit-keyframes arrowsMove1 {
              50% {
                left: 6.7rem;
                bottom: 8.5rem;
              }
            }

            .text {
              width: 1.75rem;
              height: 2.32rem;
              background-image: url("../../img/heart/text.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 7.13rem;
              left: 7.88rem;
            }
          }
        }
        .smaller{
            top: 1rem;
        }

    }
</style>
